<script setup>
import {reactive, ref} from 'vue'
import { ElButton } from 'element-plus'
import courseApi from "../api/courseApi.js";
import reserveApi from "../api/reserve.js";
import router from "../router/index.js";

let hotCourses = ref([])
loadHotCourses()
function loadHotCourses(){
  courseApi.getMyCourses().then(resp=>{
    if (resp.code===200){
      hotCourses.value=resp.data
      console.log(hotCourses.value)
    }else{
      console.log(resp.msg)
    }
  })
}
function info(course){
  router.push({name:'detail',params:{id:course.id}})
}
</script>

<template>
  <div class="ad">
    <img src="../assets/img/ad.png" style="width: 100%;" />
  </div>
  <div class="courses">
    <div class="head clear" style="height: 60px; line-height: 60px; color: #1B1C20; font-size: 16px;">
      <ul class="order" style="float: left; margin-left: 10px; list-style: none; padding: 0;">
        <li style="float: left; padding: 0px 10px; font-weight: bold;">
          我的课程
        </li>
      </ul>
    </div>
    <ul class="list clear" style="list-style: none; padding: 0; margin: 0 0 10px;">
      <li v-for="course in hotCourses" :key="course.id" style="margin: 0px 0px 20px 10px; width: calc(100% - 20px); height: 229px; float: left; position: relative; text-align: center; font-size: 0px;" @click="info(course)">
        <div class="info" style="width: 100%; height: 229px; position: relative; overflow: hidden; border-radius: 15px;">
          <img :src="course.photo" class="photo" style="width: 100%; height: 100%;" />
          <div class="course" style="text-align: left; padding: 20px 20px; position: absolute; top: 40%; height: 20%; width: 100%; left: 0px; color: #FFF; font-size: 20px; font-weight: bold; background-image: linear-gradient(90deg, #0008, #0000 60%, #0000);">
            {{ course.name }}
          </div>
          <div class="coach" style="position: absolute; left: 20px; top: 65%; color: #FFF; font-size: 12px; font-weight: bold; text-shadow: 0px 0px 5px #000;">
            {{ course.coach.name }}
          </div>
          <div class="time" style="position: absolute; bottom: 20px; left: 10px; color: #FFF; font-size: 12px; text-shadow: 0px 0px 5px #000;">
            {{ course.time }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.clear::after {
  content: '';
  display: block;
  clear: both;
}
</style>
